<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>DIY装修</title>
    <link rel="stylesheet" href="__LIBS__/layui/css/layui.css" />
    <link rel="stylesheet" href="__LIBS__/swiper/swiper.min.css" />
    <link rel="stylesheet" href="__MODULE__/admin.css?v=317" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /* 用户信息 */
        .user-info-head {
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border: 2px solid #eee;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }

        .user-info-head:hover:after {
            content: '\e681';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 28px;
            padding-top: 2px;
            font-style: normal;
            font-family: layui-icon;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .user-info-head img {
            width: 110px;
            height: 110px;
        }

        .user-info-list-item {
            position: relative;
            padding-bottom: 8px;
        }

        .user-info-list-item > .layui-icon {
            position: absolute;
        }

        .user-info-list-item > p {
            padding-left: 30px;
        }

        .layui-line-dash {
            border-bottom: 1px dashed #ccc;
            margin: 15px 0;
        }

        /* 基本信息 */
        #userInfoForm .layui-form-item {
            margin-bottom: 25px;
        }

        /* 账号绑定 */
        .user-bd-list-item {
            padding: 14px 60px 14px 10px;
            border-bottom: 1px solid #e8e8e8;
            position: relative;
        }

        .user-bd-list-item .user-bd-list-lable {
            color: #333;
            margin-bottom: 4px;
        }

        .user-bd-list-item .user-bd-list-oper {
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -8px;
            cursor: pointer;
        }

        .user-bd-list-item .user-bd-list-img {
            width: 48px;
            height: 48px;
            line-height: 48px;
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -24px;
        }

        .user-bd-list-item .user-bd-list-img + .user-bd-list-content {
            margin-left: 68px;
        }
        .box img{
            width: 400px;
            height: auto;
            z-index: 9999999;
        }
        .home{
            width: 400px;
            height: 650px;
            padding-bottom: 20px;
            /*z-index: 999;*/
            /*position: absolute;*/
            /*top:0;*/
            /*left: 0;*/
            color: #333;
            overflow:scroll;
            background: #f9f9f9;
        }
        ::-webkit-scrollbar {display:none}
        .fenlei {
            padding: 15px;
            background: #fff;
        }
        .fenlei ul{
            list-style: none;
            display: flex;
            overflow: hidden;
        }
        .fenlei ul li{
            margin: 0 6px;
            font-size: 15px;
        }
        .gd_top {
            z-index: 999;
            background: #4b89ff;
            padding-top: 10px;
            color: #fff;
            padding-bottom: 10px;
        }
        .dh_top{
            padding: 10px 0;
            background: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .dh_top .left{
            font-weight: 700;
            width:120px;
            text-align: left;
            padding: 0 10px;
        }
        .dh_top .right{
            width:60px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
        }
        .dh_top .right img{
            width: 15px;
            height: auto;
        }
        .search {
            background-color: #fff;
            height: 30px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            margin: 10px;
        }
        .search input{
            border: none;
            width: 80%;
            padding: 3px 5px;
        }
        .search img{
            width: 15px;
            height: auto;
        }
        .swiper-container {
            height: 180px;
            margin: 0 auto 10px auto;
            --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
            --swiper-navigation-color: #4b89ff;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 30px;/* 设置按钮大小 */
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-slide img {
            width: 100%;
            height: auto;
        }
        /*.swiper-container .swiper-button-next,*/
        /*.swiper-container .swiper-button-prev {*/
        /*    display: none;*/
        /*}*/
        /*.swiper-container:hover .swiper-button-next,*/
        /*.swiper-container:hover .swiper-button-prev {*/
        /*    display: block;*/
        /*}*/
        .icons{
            background: #fff;
            width: 100%;
            padding: 10px 0;
        }
        .icons ul{
            width: 100%;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: 5px 0;
        }
        .icons ul li {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
        }
        .icons ul li img{
            width: 45px;
            height: auto;
        }
        .public{
            padding: 10px;
            background: #fff;
        }
        .public .top{
            font-size: 15px;
            font-weight: 700;
            display: flex;
            padding: 3px 2px;
            align-items: center;
            justify-content: space-between;
        }
        .public .content{
            background:linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
            background-size:30px 30px;
            width: 100%;
            height: 120px;
            border: 1px solid #ddd;
            border-radius: 15px;
        }
        .jigou .content{
            height: 330px;
        }
        .kecheng .content{
            height: 450px;
        }
        .layui-input-block {
            margin-left: 0 !important;
        }
        .phonebasic{
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
        }
        .savebtns{
            position: fixed;
            bottom:0;
            left:0;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: #fff;
            z-index: 99999999;
        }
        .layui-form-item{
            margin-bottom: 0px !important;
        }
        .newborder{
            border: 1px dashed #4b89ff;
        }
        .selected{
            cursor: move;
            position: relative;
        }
        .del {
            display: none;
            position: absolute;
            font-size: 26px;
            right: -3px;
            top: -15px;
            cursor: pointer;
            z-index: 999999;
        }
        .zujians{
            overflow: hidden;
            margin: 0;
            padding: 0;
            transition: all .3s;
        }
        .zujians li:hover{
            color: #4b89ff;
            border: 1px solid  #4b89ff;
        }
        .zujians li {
            display: flex;
            flex-direction: column;
            float: left;
            color: #303133;
            font-size: 12px;
            width: 90px;
            height: 72px;
            text-align: center;
            cursor: pointer;
            position: relative;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            border: 1px solid #eee;
            align-items: center;
            justify-content: center;
        }
        .zujians li img{
            width: 50px;
            height: auto;
        }
        .title{
            font-weight: 700;
            font-size: 1.1rem;
            background: #fff;
            text-align: center;
            padding: 5px 0;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="home2" style="display: none;">
            <div class="dh_top">
                <div class="left">
                    21:39
                </div>
                <div class="right">
                    <img src="__IMAGES__/xinhao.png" alt="">
                    <img src="__IMAGES__/wifi.png" alt="">
                    <img src="__IMAGES__/dianliang.png" alt="">
                </div>
            </div>
            <div class="title">知学而进</div>
            <div class="fenlei selected">
                <i class="layui-icon layui-icon-close-fill del"></i>
                <ul>
                    <li style="border-bottom: 3px solid #333;font-weight: 700;font-size: 1rem;">推荐</li>
                    <li>分类1</li>
                    <li>分类2</li>
                    <li>分类3</li>
                    <li>分类4</li>
                    <li>分类5</li>
                    <li>分类6</li>
                </ul>
            </div>
            <div class="searchbox selected">
                <div class="search">
                    <input type="text" placeholder="请输入搜索内容">
                    <img src="__IMAGES__/search1.png" alt="">
                </div>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
            <!-- Swiper -->
            <div class="swiper-container selected">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="__IMAGES__/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="__IMAGES__/2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="__IMAGES__/3.jpg" alt=""></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
            <div class="icons selected">
                <ul>
                    <li><img src="__IMAGES__/mall.png" alt=""><span>商城</span></li>
                    <li><img src="__IMAGES__/daoshi.png" alt=""><span>导师</span></li>
                    <li><img src="__IMAGES__/kaoshi.png" alt=""><span>考试</span></li>
                    <li><img src="__IMAGES__/icon1.png" alt=""><span>电子书</span></li>
                    <li><img src="__IMAGES__/qiandao.png" alt=""><span>签到</span></li>
                </ul>
                <ul>
                    <li><img src="__IMAGES__/peixunjigou.png" alt=""><span>机构</span></li>
                    <li><img src="__IMAGES__/tgm.png" alt=""><span>推广码</span></li>
                    <li><img src="__IMAGES__/live.png" alt=""><span>直播</span></li>
                    <li><img src="__IMAGES__/hot.png" alt=""><span>头条</span></li>
                    <li><img src="__IMAGES__/vip.png" alt=""><span>会员</span></li>
                </ul>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
            <div class="public seckill selected">
                <div class="top">
                    <div>限时秒杀 00:29:18</div>
                    <div style="font-size: 12px;">查看更多></div>
                </div>
                <div class="content"></div>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
            <div class="public pintuan selected">
                <div class="top">
                    <div>超级拼团</div>
                    <div style="font-size: 12px;">查看更多></div>
                </div>
                <div class="content"></div>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
            <div class="public jigou selected">
                <div class="top">
                    <div>推荐机构</div>
                    <div style="font-size: 12px;">查看更多></div>
                </div>
                <div class="content"></div>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
            <div class="public kecheng selected">
                <div class="top">
                    <div>课程专场</div>
                    <div style="font-size: 12px;">查看更多></div>
                </div>
                <div class="content"></div>
                <i class="layui-icon layui-icon-close-fill del"></i>
            </div>
        </div>

        <!-- 左 -->
        <div class="layui-col-sm12 layui-col-md4">
            <div class="layui-card phonebasic">
                <div class="box" style="width: 450px;">
                    <div class="home">
                        <div class="dh_top">
                            <div class="left" id="showtime">

                            </div>
                            <div class="right">
                                <img src="__IMAGES__/xinhao.png" alt="">
                                <img src="__IMAGES__/wifi.png" alt="">
                                <img src="__IMAGES__/dianliang.png" alt="">
                            </div>
                        </div>
                        <div class="title">知学而进</div>
                        <div class="fenlei selected">
                            <i class="layui-icon layui-icon-close-fill del"></i>
                            <ul>
                                <li style="border-bottom: 3px solid #333;font-weight: 700;font-size: 1rem;">推荐</li>
                                <li>分类1</li>
                                <li>分类2</li>
                                <li>分类3</li>
                                <li>分类4</li>
                                <li>分类5</li>
                                <li>分类6</li>
                            </ul>

                        </div>
                        <div class="searchbox selected">
                            <div class="search">
                                <input type="text" placeholder="请输入搜索内容">
                                <img src="__IMAGES__/search1.png" alt="">
                            </div>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                        <!-- Swiper -->
                        <div class="swiper-container selected">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="__IMAGES__/1.jpg" alt=""></div>
                                <div class="swiper-slide"><img src="__IMAGES__/2.jpg" alt=""></div>
                                <div class="swiper-slide"><img src="__IMAGES__/3.jpg" alt=""></div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                        <div class="icons selected" onclick="tabbar('icons')">
                            <ul>
                                <li><img src="__IMAGES__/mall.png" alt=""><span>商城</span></li>
                                <li><img src="__IMAGES__/daoshi.png" alt=""><span>导师</span></li>
                                <li><img src="__IMAGES__/kaoshi.png" alt=""><span>考试</span></li>
                                <li><img src="__IMAGES__/icon1.png" alt=""><span>电子书</span></li>
                                <li><img src="__IMAGES__/qiandao.png" alt=""><span>签到</span></li>
                            </ul>
                            <ul>
                                <li><img src="__IMAGES__/peixunjigou.png" alt=""><span>机构</span></li>
                                <li><img src="__IMAGES__/tgm.png" alt=""><span>推广码</span></li>
                                <li><img src="__IMAGES__/live.png" alt=""><span>直播</span></li>
                                <li><img src="__IMAGES__/hot.png" alt=""><span>头条</span></li>
                                <li><img src="__IMAGES__/vip.png" alt=""><span>会员</span></li>
                            </ul>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                        <div class="public seckill selected">
                            <div class="top">
                                <div>限时秒杀 00:29:18</div>
                                <div style="font-size: 12px;">查看更多></div>
                            </div>
                            <div class="content"></div>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                        <div class="public pintuan selected">
                            <div class="top">
                                <div>超级拼团</div>
                                <div style="font-size: 12px;">查看更多></div>
                            </div>
                            <div class="content"></div>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                        <div class="public jigou selected">
                            <div class="top">
                                <div>推荐机构</div>
                                <div style="font-size: 12px;">查看更多></div>
                            </div>
                            <div class="content"></div>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                        <div class="public kecheng selected">
                            <div class="top">
                                <div>课程专场</div>
                                <div style="font-size: 12px;">查看更多></div>
                            </div>
                            <div class="content"></div>
                            <i class="layui-icon layui-icon-close-fill del"></i>
                        </div>
                    </div>
                </div>
                <div class="savebtns">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-filter="diyInfoSubmit" lay-submit>保存
                            </button>
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <div class="layui-input-block">-->
<!--                            <button class="layui-btn" lay-filter="preview" >预览-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
        <!-- 右 -->
        <div class="layui-col-sm12 layui-col-md3">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this" onclick="tabbar('index')">首页DIY装修</li>
                        <li onclick="tabbar('icons')">分类导航图标</li>
                    </ul>
                    <div class="layui-tab-content indexdiv" style="height: 600px;display: none;">
                        <h4 style="font-size: 12px;margin: 15px 0;cursor: pointer;color: #1890ff;">Tips:点击右键可展开更多操作项,可在小程序提审时与小程序助审开关搭配使用</h4>
                        <!-- tab1 -->
                        <div class="layui-tab-item layui-show">
                            <h3 style="font-size: 15px;margin: 10px 0;cursor: pointer;">基础组件</h3>
                            <ul class="zujians" style="opacity: 1;">
                                <li title="分类" data-btn="fenlei" class="platform-item"><img src="__IMAGES__/goods_category_admin.png"><span>分类</span></li>
                                <li title="搜索" data-btn="searchbox" class="platform-item"><img src="__IMAGES__/search_admin.png"><span>搜索</span></li>
                                <li title="幻灯片" data-btn="swiper-container" class="platform-item"><img src="__IMAGES__/image_ads_admin.png"><span>幻灯片</span></li>
                                <li title="分类导航" data-btn="icons" class="platform-item" id="diyicons"><img src="__IMAGES__/top_category_admin.png"><span>分类导航</span></li>
                                <li title="推荐机构" data-btn="jigou" class="platform-item"><img src="__IMAGES__/top_category_admin.png"><span>推荐机构</span></li>
                                <li title="课程专场" data-btn="kecheng" class="platform-item"><img src="__IMAGES__/top_category_admin.png"><span>课程专场</span></li>
                            </ul>
                            <h3 style="font-size: 15px;margin: 10px 0;cursor: pointer;">营销组件</h3>
                            <ul class="zujians" style="opacity: 1;">
                                <li title="拼团" data-btn="pintuan" class="platform-item"><img src="__IMAGES__/pintuan_admin.png"><span>拼团</span></li>
                                <li title="秒杀" data-btn="seckill" class="platform-item"><img src="__IMAGES__/seckill_admin.png"><span>秒杀</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-tab-content iconsdiv" style="height: 700px;display: none;">
                        <form class="layui-form" lay-filter="eQuestionForm" style="max-width: 900px;">
                            <div class="layui-form-item js-new-attr-list">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <div class="layui-form">
                                        <table class="layui-table">
                                            <colgroup>
                                                <col />
                                                <col />
                                                <col />
<!--                                                <col width="10%" />-->
                                            </colgroup>
                                            <thead>
                                            <tr>
                                                <th>图标</th>
                                                <th>名称</th>
                                                <th>链接(在uniapp前端代码pages.json查找)</th>
<!--                                                <th>操作</th>-->
                                            </tr>
                                            </thead>
                                            <tbody class="ns-attr-new">
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/mall.png" ></td>
                                                    <td><input name="column[text0][name]" class="layui-input" value="商城"/></td>
                                                    <td><input name="column[text0][link]" class="layui-input" value="/pages/mall/shopping/shopping"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/daoshi.png" ></td>
                                                    <td><input name="column[text1][name]" class="layui-input" value="导师"/></td>
                                                    <td><input name="column[text1][link]" class="layui-input" value="/pages/teacher-center/tutor-list/tutor-list"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/kaoshi.png" ></td>
                                                    <td><input name="column[text2][name]" class="layui-input" value="考试"/></td>
                                                    <td><input name="column[text2][link]" class="layui-input" value="/pages/sub/exam/exam1"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/icon1.png" ></td>
                                                    <td><input name="column[text3][name]" class="layui-input" value="电子书"/></td>
                                                    <td><input name="column[text3][link]" class="layui-input" value="/pages/e-book/book/book"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/qiandao.png" ></td>
                                                    <td><input name="column[text4][name]" class="layui-input" value="签到"/></td>
                                                    <td><input name="column[text4][link]" class="layui-input" value="/pages/sign-in/sign-in"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/peixunjigou.png" ></td>
                                                    <td><input name="column[text5][name]" class="layui-input" value="机构"/></td>
                                                    <td><input name="column[text5][link]" class="layui-input" value="/pages/sub/training-agency/training-agency"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/tgm.png" ></td>
                                                    <td><input name="column[text6][name]" class="layui-input" value="推广码"/></td>
                                                    <td><input name="column[text6][link]" class="layui-input" value="/pages/fenxiao/promotion-code/promotion-code"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/live.png" ></td>
                                                    <td><input name="column[text7][name]" class="layui-input" value="直播"/></td>
                                                    <td><input name="column[text7][link]" class="layui-input" value="/pages/course-list/course-list?media=live&goodstype=course"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/hot.png" ></td>
                                                    <td><input name="column[text8][name]" class="layui-input" value="头条"/></td>
                                                    <td><input name="column[text8][link]" class="layui-input" value="/pages/Headlines/Headlines-index/Headlines-index"/></td>
                                                </tr>
                                                <tr>
                                                    <td><img width="30" height="30" src="__IMAGES__/vip.png" ></td>
                                                    <td><input name="column[text9][name]" class="layui-input" value="会员"/></td>
                                                    <td><input name="column[text9][link]" class="layui-input" value="/pages/vip/vip"/></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
<!--                                    <button class="layui-btn" id="addField">添加图标</button>-->
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block text-center">
                                    <button class="layui-btn" lay-filter="eQuestionSubmit" lay-submit>&emsp;提交&emsp;</button>
<!--                                    <button ew-event="closeThisTabs" type="button" class="layui-btn layui-btn-primary">&emsp;关闭&emsp;</button>-->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="__LIBS__/layui/layui.js"></script>
<script type="text/javascript" src="__LIBS__/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__LIBS__/swiper/swiper.min.js"></script>
<script type="text/javascript" src="__NJS__/common.js?v=318"></script>
<script>
    $(".indexdiv").show();
    var showtimef = function () {
        var nowdate = new Date();
            day = nowdate.getDay(),
            week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            h = nowdate.getHours(),
            m = nowdate.getMinutes(),
            s = nowdate.getSeconds(),
            h = checkTime(h),
            m = checkTime(m),
            s = checkTime(s);
        return  h +":" + m + ":" + s +' '+ week[day];
    }
    var checkTime = function (i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    setInterval (function() {
        $("#showtime").html(showtimef());
    }, 1000);
    $(".selected").mouseenter(function (){
        $(this).addClass("newborder").siblings().removeClass("newborder");
        $(this).find(".del").show();
    });
    $(".selected").mouseleave(function (){
        $(this).find(".del").hide();
    });
    $(".del").click(function (){
        layer.confirm('确定要删除吗？', {
            btn: ['确定','取消'] //按钮
        },(index)=>{
            $(this).parent().remove();
            layer.close(index);
        },()=>{
            console.log('取消操作');
        });
    });
    function tabbar(e){
        console.log(e);
        if(e == 'index'){
            $(".indexdiv").show();
            $(".iconsdiv").hide();
        }else if(e == 'icons'){
            $(".indexdiv").hide();
            $(".iconsdiv").show();
        }
    };
    $(".platform-item").click(function (){
        layer.confirm('确定要添加本模块吗？', {
            btn: ['确定','取消'] //按钮
        },(index)=>{
            var html = $(".home2").find("."+$(this).data('btn')).prop("outerHTML");
            if($(".home").append(html)){
                layer.msg('添加成功');
                if($(this).data('btn') == 'swiper-container'){
                    var swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        spaceBetween: 30,
                        autoplay : 2000,
                        loop: true
                    });
                }
                $(".selected").mouseenter(function (){
                    $(this).addClass("newborder").siblings().removeClass("newborder");
                    $(this).find(".del").show();
                });
                $(".selected").mouseleave(function (){
                    $(this).find(".del").hide();
                });
                $(".del").click(function (){
                    layer.confirm('确定要删除吗？', {
                        btn: ['确定','取消'] //按钮
                    },(index)=>{
                        $(this).parent().remove();
                        layer.close(index);
                    },()=>{
                        console.log('取消操作');
                    });
                });
            }
            layer.close(index);
        },()=>{
            console.log('取消操作');
        });
    });

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
        autoplay : 2000,
        loop: true
    });

    layui.use(['layer', 'form', 'element', 'admin','contextMenu',], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var admin = layui.admin;
        var contextMenu = layui.contextMenu;
        var items = [
            // {
            //     icon: 'layui-icon layui-icon-heart-fill',
            //     name: '加入收藏',
            //     click: function () {
            //         layer.msg('点击了' + this.name);
            //     }
            // },
            {
                icon: 'layui-icon layui-icon-app',
                name: '编辑导航图标',
                click: ()=>{
                    layer.msg('点击了' + this.name);
                }
            },
        ];
        // DIV内鼠标右键菜单
        contextMenu.bind('#diyicons', items);

        var num = 0;
        $("#addField").click(function(){
            console.log(num);
            var html =
                "<tr>" +
                "<td >"+
                '<img width="30" height="30" src="" >'+
                '<input name="column[text' + num + '][name]" class="layui-input" />'+
                "</td>"+
                "<td>"+
                '<select name="column[text' + num + '][type]">'+
                '<option value="0" selected>请选择字段类型</option>'+
                '<option value="input">单行文本框</option>'+
                '<option value="image">图片上传</option>'+
                '<option value="richtext">富文本</option>'+
                '</select>'+
                "</td>"+
                "<td>"+
                '<input name="column[text' + num + '][sort]" class="layui-input" required lay-verify="required"/>'+
                "</td>"+
                "<td>"+
                '<a href="javascript:;" onclick="deleteTr(this)">'+
                '<i class="layui-icon layui-icon-close"></i>'+
                '</a>'+
                "</td>"+
                "</tr>";
            $(".ns-attr-new").append(html);
            num++;
            layui.use('form', function(){ //此段代码必不可少
                var form = layui.form;
                form.render();
            });
        })
        $("#uploadicon").click(()=>{
           console.log('123');
        });
        var diys = [
            {k: 'fenlei', v: 'is_flshow'},
            {k: 'searchbox', v: 'is_searchshow'},
            {k: 'swiper-container', v: 'is_adshow'},
            {k: 'icons', v: 'is_dhlshow'},
            {k: 'seckill', v: 'is_seckill'},
            {k: 'pintuan', v: 'is_pintuan'},
            {k: 'jigou', v: 'is_jigoushow'},
            {k: 'kecheng', v: 'is_zcshow'},
            ];
        /* 监听表单提交 */
        form.on('submit(diyInfoSubmit)', function () {
            let data1 = $(".home").children();
            let result = {};
            for(var i=0;i<data1.length;i++){
                for(var j=0;j<diys.length;j++){
                    if(data1[i].className.indexOf(diys[j].k) !=-1){
                        var val = diys[j].v;
                        result[val] = 1;
                    }
                }
            }
            console.log(result);
            $.ajax({
                url:"{:url('diypage')}",
                type:'POST',
                dataType:'json',
                data:result,
                success:function(res){
                    console.log(res)
                    if (res.code == 0 || res.code == '0') {
                        layer.msg(res.msg,{icon:1,time:1500,shade:0.1})
                    } else {
                        $(".layui-btn").removeClass('layui-disabled').removeAttr('disabled');
                        wk.error(res.msg);
                        return false;
                    }
                }
            })
        });
        // 表单提交事件
        form.on('submit(eQuestionSubmit)', function (data) {

            $.ajax({
                url: "{:url('diypage_icons1')}",
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1, time: 1500, shade: 0.1})
                    } else {
                        $(".layui-btn").removeClass('layui-disabled').removeAttr('disabled');
                        wk.error(res.msg);
                        return false;
                    }
                }
            })
        });
    });
</script>
</body>
</html>